import React, { useRef, useState } from "react";
import style from "./style.module.scss";
import collectionDelete from "../../assets/images/image/hdpi/collection_delete.png";
import { useAppSelector } from "../../store/hooks";
import { useNavigate } from "react-router-dom";
import { getTimeFormatText } from "../../utils/formatTime";
import { cancelSickCollection } from "../../api/my";

//  我的——用户收藏病友圈数据类型
interface PatientCircleItem {
  id: number;
  sickCircleId: number;
  title: string;
  disease: string;
  createTime: number;
  collectionNum: number;
  commentNum: number;
}

interface PropsType {
  ind: number;
  patientCircleItem: PatientCircleItem;
}

export const UserPatientCircleItem: React.FC<PropsType> = ({
  ind,
  patientCircleItem,
}) => {
  const navigate = useNavigate();

  const userId = useAppSelector((state) => state.user.userInfo.userId);
  const sessionId = useAppSelector((state) => state.user.userInfo.sessionId);

  const handleDelete = async () => {
    await cancelSickCollection(
      patientCircleItem.sickCircleId,
      userId.toString(),
      sessionId
    );
  };

  return (
    <div
      className={style.collectionConent_item}
      onClick={() =>
        navigate(
          `/patient/circle/detail?id=${patientCircleItem.id}&sickCircleId=${patientCircleItem.sickCircleId}`
        )
      }
    >
      <div className={style.patientsphere}>
        <div className={style.title}>{patientCircleItem.title}</div>
        <div className={style.disease}>{patientCircleItem.disease}</div>
        <div className={style.itemFooter_box}>
          <div className={style.itemFooter}>
            <div>收藏</div>
            <div className={style.numbers}>
              {patientCircleItem.collectionNum}
            </div>
            <div>建议</div>
            <div className={style.numbers}>{patientCircleItem.commentNum}</div>
          </div>
          <div className={style.time}>
            {getTimeFormatText(new Date(patientCircleItem.createTime))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default UserPatientCircleItem;
